<template>
  <div class="pressure-main">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <MainTitle :main-title="mainTitle" />
    <div class="content">
      <SystemSwitch :current-system="system" @setSystem="setSystem" />
      <el-button class="view-button" type="primary" @click="openView">返回</el-button>
      <div class="pressure-setting">
        <setting :data="machineList" :system="system" :out-pressure="outPressure" :run-flag="runFlag" />
      </div>
      <div class="pressure-boxplot">
        <vechart :options="options" />
        <div class="rate-value">
          <div class="rate-value-name" style="white-space:nowrap">
            负载比
          </div>
          <div v-for="(item, index) in eqmList" :key="index" class="rate-value-item">{{ getLoad(sum,item) }}%</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import options from './json/boxPlotOption.json'
import { mapState } from 'vuex'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    setting: () => import('./Setting.vue'),
    vechart: () => import('@components/charts/Vechart.vue'),
    SystemSwitch: () => import('@/components/SystemSwitch.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      system: 'hcda',
      options: options,
      machineList: [],
      infoKey: { 'upControlLimit': 'upControlLimit', 'lowControlLimit': 'lowControlLimit' },
      outPressurePointObj: {
        hcda: 'p100248',
        lcda: 'p100249'
      },
      outPressure: '7.3',
      runFlag: false,
      eqmList: [],
      sum: null,
      mainTitle: 'CDA压力设置与荷载分布'
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    })
  },
  created() {
    this.$nextTick(() => {
      this.setSystem('hcda')
    })
  },
  methods: {
    // sleep(time) {
    //   return new Promise((resolve) => setTimeout(resolve, time))
    // },
    openView() {
      this.$router.push({ name: 'bootSuggestion' })
    },
    async getMachineUclAndLcl() {
      try {
        this.runFlag = true
        const result = await this.service.getInfoByMachine({ 'category_id': 'machine', 'item_id': this.system })
        console.log('settingcard', result)
        // await this.sleep(1000)
        if (result && result.flag) {
          const machineList = result.data.map(e => {
            return {
              ...e,
              ...e.info
            }
          })
          this.machineList = machineList
        }
        this.runFlag = false
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    async getOutPressure() {
      try {
        const result = await this.service.getRawDataCurrent({ 'tag_id': 'ip', 'point_id': this.outPressurePointObj[this.system] })
        // await this.sleep(3000)
        if (result && result.flag && result.data.length > 0) {
          this.outPressure = result.data[0].value.toFixed(2) + ''
          console.log('outpressure', this.outPressure)
        }
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    async getBootSuggestion(type) {
      try {
        const result = await this.service.getBootSuggestion({ 'id': type })
        if (!result.flag || !result.data) {
          this.runFlag = false
          return
        }
        this.eqmList = result.data
        let sum = 0
        this.eqmList.forEach((item, index) => {
          sum = sum + item.data.i / item.info.specCurrent * item.info.specOutputFlow
        })
        this.sum = sum
        console.log('result', this.eqmList)
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '负载比数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    getLoad(sum, item) {
      if (!sum) {
        this.$notify({
          title: '数据错误',
          type: 'error',
          duration: 2500
        })
        this.resultValue = 0
        return 0
      }
      if (!(item.info && item.info.specCurrent)) {
        this.$notify({
          title: '额定电流数据错误',
          type: 'error',
          duration: 2500
        })
        this.resultValue = 0
        return 0
      }
      if (!(item.info && item.info.specOutputFlow)) {
        this.$notify({
          title: '额定产气流量数据错误',
          type: 'error',
          duration: 2500
        })
        this.resultValue = 0
        return 0
      }
      let resultValue = 0
      const flow = item.data.ic * (item.data.i / item.info.specCurrent) * item.info.specOutputFlow / sum
      const flow_percent = Math.min(100, 100 * flow / item.info.specOutputFlow)
      if (item.info.machineType === 'compressor') {
        if (flow_percent >= 0 && flow_percent <= 70) {
          resultValue = 3 * flow_percent / 7
        } else {
          resultValue = (7 * flow_percent - 400) / 3
        }
      } else if (item.info.machineType === 'screwCompressor') {
        if (flow_percent >= 0 && flow_percent <= 35) {
          resultValue = 39 * flow_percent / 35
        } else {
          resultValue = 61 * flow_percent / 65 + 80 / 13
        }
      }
      this.resultValue = resultValue
      return resultValue.toFixed(2)
    },
    setSystem(type) {
      this.system = type
      this.getBootSuggestion(type)
      this.getMachineUclAndLcl()
      this.getOutPressure()
    }
  }
}

</script>

<style lang="scss" scoped>

.content{
  position: relative;
  width: 90%;
  margin: 2rem 5% 0;
  height: 81vh;
  display: flex;
  flex-direction: column;
  }
.view-button{
  width: 8rem;
  height: 3rem;
  line-height: 3rem;
  position: absolute;
  top: 1%;
  right: 0%;
  font-size: 1rem;
  color:white;
  align-self: flex-end;
  background-color: #05417f !important;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
}
.pressure-main{
  background-image: url('~@assets/report/bg.png');
  background-size:100% 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 5rem;
}
.pressure-setting{
    display: flex;
    flex: 1;
}
.pressure-boxplot{
    position: relative;
    display: flex;
    flex:2;
    flex-flow: column;
}
.rate-value-item {
    text-align: center;
    flex: 1;
    // border-right: 1px solid #4d5e72;
}
.rate-value-name {
    text-align: center;
    font-size: 1.4rem ;
    flex: 0;
    // border-right: 1px solid #4d5e72;
}
.rate-value{
  display: flex;
  flex-flow: row;
  flex: 1;
  // background: rgba(6, 72, 119, 0.4);
  font-size: 1.4rem ;
  color: #02fffd;
  margin-bottom: 2%;
  // border: 2px solid #4d5e72;
}
.loading{
position: absolute;
width: 100%;
height: 100%;
background: rgba($color: #333, $alpha: 0.7);
z-index: 9;
}
</style>
